<template>
  <div class="general-app" :style="{ 'padding-bottom': $computeVh(20) }">
    <!-- <el-header class="custom-header">
      <span style="color: rgb(245, 245, 245)">人机增强多智能体量化评估与演化</span>
      <div class="nav-tab">
        <el-tabs style="color: rgb(245, 245, 245)" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="模型" name="first" style="font:16px;"></el-tab-pane>
          <el-tab-pane label="性能" name="second"></el-tab-pane>
          <el-tab-pane label="场景" name="third"></el-tab-pane>
        </el-tabs>
      </div>
    </el-header> -->
    <MainHeader :typeIndex="typeIndex" @changeTypeEvent="handleClick" />
    <el-main class="model-box-main">
      <div class="mian-box-card">
        <div class="button-box">
          <el-button text :class="['item-button', buttonIndex === 0 ? 'item-active' : '']"
            @click="handleCalculate">算例</el-button>
          <el-button text :class="['item-button', buttonIndex === 1 ? 'item-active' : '']"
            @click="handleAgent">智能体</el-button>
        </div>
      </div>
      <!-- <div class="button-box">
        <el-button text :class="['item-button', buttonIndex === 0 ? 'item-active' : '']"
          @click="handleCalculate">算例</el-button>
        <el-button text :class="['item-button', buttonIndex === 1 ? 'item-active' : '']"
          @click="handleAgent">智能体</el-button>
      </div> -->

      <div class="general-container main-bottom-cantainer">
        <router-view />
      </div>
    </el-main>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import type { ImageProps } from "element-plus";
import axios from "axios";
import { useRouter } from 'vue-router'
import { color } from "echarts";
import MainHeader from '@/views/MainHeader.vue';

const activeName = ref('first');
const buttonIndex = ref(0)
const typeIndex = ref(0)

function handleCalculate() {
  buttonIndex.value = 0
  router.push('/mainbox/calculate')
}

function handleAgent() {
  buttonIndex.value = 1
  router.push('/mainbox/agent')
}

const router = useRouter();

const handleClick = (item, index) => {
  activeName.value = item;
  typeIndex.value = index;
  if (activeName.value === "second") {
    router.push('/performance')
  } else if (activeName.value === "third") {
    router.push('/effect')
  }
};

onMounted(() => {
  router.push('/mainbox/calculate')
})


function simulateAndVerify() { }

</script>

<style lang="scss">
.model-box-main {
  flex: 1;
  color: #fff;
  display: flex;
  flex-direction: column;

  .mian-box-card {
    background-color: rgba(16, 68, 93, 0.6);
    border: 1px solid #2F606B;
    margin-bottom: computeVh(20);
    padding: 13px 16px;

    .button-box {
      display: flex;
      width: computeVw(200);
      border-radius: 1px;
      border: 1px solid #2F606B;

      .item-button {
        flex: 1;
        color: #fff;
        border-radius: 0;
        margin: 0
      }

      .item-button:hover {
        background-color: #162530;
      }

      .item-active {
        font-weight: bold;
        background-color: #00C3AC;
      }
    }

  }
}

.main-bottom-cantainer {
  display: flex;
  flex-direction: column;
  height: computeVh(900);
  padding-bottom: computeVh(20);
  box-sizing: border-box;
  overflow: hidden;
}

//模型通用样式
.type-box {
  height: 75px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  flex-shrink: 0;

  .left-box {
    display: flex;
    flex: 1;

    .select-item {
      display: flex;
      align-items: center;
      margin-right: computeVw(50);
    }
  }

  .right-box {
    display: flex;
    flex: 1;
    justify-content: end;
  }
}

.line {
  margin: 0 computeVw(16);
  border: 0px;
  border-bottom: 1px solid #2F606B;
}
</style>